<!--物料产品管理-->
<template>
    <div>
        <el-container v-if="!showDetails">
            <el-aside class="pro-box" width="15%"
                      style="height: 85vh;border-right: #ffffff 1px solid;">
                <div class="main-title">物料产品分类</div>
                <div style="height: 80%;overflow: auto">
                    <el-menu style="background-color: white" @select="handleSelected"
                    >
                        <el-sub-menu index="1">
                            <template #title>
                                <span>产品</span>
                            </template>
                            <template v-for="(item,index) in types">
                                <el-menu-item v-if="item.category === 0" :index="item.idClassify+''">{{
                                    item.name
                                    }}
                                </el-menu-item>
                            </template>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <span>物料</span>
                            </template>
                            <template v-for="(item,index) in types">
                                <el-menu-item v-if="item.category === 1" :index="item.idClassify+''">{{
                                    item.name
                                    }}
                                </el-menu-item>
                            </template>
                        </el-sub-menu>
                    </el-menu>
                </div>
            </el-aside>
            <el-main>

                <!--                修改阈值信息对话框-->
                <make-inventory-dialog :visible="makeInvokeDialog" :details="details"
                                       @call-closed="makeDialogClosed"
                                       @called-update-success="updateInventoryCallback"

                />
                <!--                修改分类信息对话框-->
                <make-product-and-material-classify-dialog
                        :visible="makeProductAndMaterialClassifyDialog" :details="details"
                        @call-closed="makeProductAndMaterialClassifyDialogClosed"
                        @called-update-success="updateClassifyCallback"
                />
                <!--                添加产品对话框-->
                <add-product-and-material-drawer
                    :visible="addProductAndMaterialDrawer"
                    @call-closed="handleDrawerClosed"
                />


                <div style="margin-top: 10px;margin-bottom: 30px">
                    <el-row justify="space-evenly">
                        <el-col :span="2">
                        <span style="line-height:30px;float: right">
                            型号
                        </span>
                        </el-col>
                        <el-col :span="5">
                            <el-input v-model="queryParams.model" placeholder="请输入物料编码"/>
                        </el-col>
                        <el-col :span="2">
                        <span style="line-height:30px;float: right">
                            名称
                        </span>
                        </el-col>
                        <el-col :span="5">
                            <el-input v-model="queryParams.name" placeholder="请输入物料名称"/>
                        </el-col>
                        <el-col :span="4"></el-col>
                        <el-col :span="5">
                            <el-button-group>
                                <el-button @click="handleQuery" type="primary">
                                    <bar-icon :icon="'select'" :width="15" :height="15" :color="'#ffffff'"/>
                                </el-button>
                                <el-button @click="handleResetQuery">
                                    <bar-icon :icon="'reset'" :width="15" :height="15" :color="'#24273a'"/>

                                </el-button>
                                <el-button @click="handleAdd" type="primary">
                                    <bar-icon :icon="'add'" :width="15" :height="15" :color="'#ffffff'"/>

                                </el-button>
                                <el-button @click="handleDelete" type="danger">
                                    <bar-icon :icon="'delete'" :width="15" :height="15" :color="'#ffffff'"/>
                                </el-button>
                            </el-button-group>
                        </el-col>
                    </el-row>
                </div>
                <el-table
                        height="650"
                        :data="tableData"
                        highlight-current-row
                        style="width: 100%">
                    <el-table-column type="selection"></el-table-column>
                    <!--                    <el-table-column  type="expand" width="50" >-->
                    <!--                        <template #default="props">-->
                    <!--                            <div>-->
                    <!--                                展开之后的信息-->
                    <!--                            </div>-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                    <el-table-column width="80">
                        <div style="display: flex;align-items: center">
                            <bar-icon :icon="'fileDictionary'" :width="32" :height="32"/>
                        </div>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="名称">
                    </el-table-column>
                    <el-table-column
                            prop="model"
                            label="规格型号">
                    </el-table-column>
                    <el-table-column
                            prop="unitName"
                            label="单位">
                    </el-table-column>
                    <el-table-column
                            label="类别">
                        <template #default="scope">
                            <div>{{ scope.row.category === 0 ? '产品' : '物料' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column

                            label="所属分类">
                        <template #default="scope">
                            <!--                            一个删除线样式的span-->
                            <span v-if="scope.row.isEnableAboutClassify === 0"
                                  style="text-decoration: line-through;color: #d2d2d2">{{
                                scope.row.classifyName
                                }}</span>
                            <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="点击更新分类信息"
                                    placement="top"
                            >
                                <el-tag style="cursor:pointer;" @click="updateClassify(scope.row)"
                                        v-if="scope.row.isEnableAboutClassify === 0"
                                        type="info">已弃用
                                </el-tag>
                            </el-tooltip>

                            <span v-if="scope.row.isEnableAboutClassify === 1">{{ scope.row.classifyName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="是否启用">
                        <template #default="scope">
                            <div v-if="scope.row.stockStatus === '1'">
                                <el-tooltip
                                        effect="dark"
                                        content="设置禁用"
                                        placement="top"
                                >
                                    <bar-icon style="cursor:pointer;" @click="handleUpdateStatus(scope.row)"
                                              :icon="'enable'" :width="20" :height="20" :color="'#00A0E9'"/>
                                </el-tooltip>
                            </div>
                            <div @click="handleUpdateStatus" v-if="scope.row.stockStatus === '0'">
                                <el-tooltip
                                        effect="dark"
                                        content="设置启用"
                                        placement="top"
                                >
                                    <bar-icon style="cursor:pointer;" @click="handleUpdateStatus(scope.row)"
                                              :icon="'disable'" :width="20" :height="20" :color="'#d2d2d2'"/>
                                </el-tooltip>


                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="库存状态">
                        <template #default="scope">

                            <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="设置安全库存阈值"
                                    placement="top"
                            >
                                <div style="cursor:pointer;" @click="handleMakeInventory(scope.row)">
                                    <el-tag v-if="scope.row.inventory===null" type="info">未设置</el-tag>
                                    <el-tag v-else-if="(scope.row.count-scope.row.inventory)===0" type="warning">无库存
                                    </el-tag>
                                    <el-tag v-else-if="(scope.row.count-scope.row.inventory)>0" type="success">正常
                                    </el-tag>
                                    <el-tag v-else type="danger">缺货</el-tag>
                                </div>
                            </el-tooltip>

                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            width="120"
                            label="操作">
                        <template #default="scope">
                            <el-row justify="start">
                                <el-col :span="5">
                                    <el-tooltip
                                            content="查看详情"
                                            effect="dark"
                                            placement="top"
                                    >
                                        <bar-icon :icon="'see'" :width="28" :height="28" :color="'#3475fe'"
                                                  @click="makeDetails(scope.row)"
                                                  style="cursor:pointer;"/>
                                    </el-tooltip>
                                </el-col>
                                <el-col :span="4">

                                </el-col>
                                <el-col :span="5">
                                    <el-tooltip
                                            content="删除"
                                            effect="dark"
                                            placement="top"
                                    >
                                        <bar-icon :icon="'delete'" :width="13" :height="13" :color="'#ff4747'"
                                                  style="cursor:pointer;"/>

                                    </el-tooltip>

                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="pagination-block">
                    <el-pagination layout="prev, pager, next" :pager-count="7" :total="total" @change="handleChanged"/>
                </div>
            </el-main>
        </el-container>
        <template v-if="showDetails">
            <material-detail :details="details" @getBack="handleBack"/>
        </template>
    </div>
</template>

<script>
import mdApi from '../../util/request.js'
import BarIcon from '../widget/icon/BarIcon.vue'
import MaterialDetail from './detail/MaterialDetail.vue'
import MakeInventoryDialog from '../widget/dialog/MakeInventoryDialog.vue'
import MakeProductAndMaterialClassifyDialog from '../widget/dialog/MkeProductAndMaterialClassifyDialgo.vue'
import AddProductAndMaterialDrawer from '../widget/drawer/AddProductAndMaterialDrawer.vue'

export default {
    name: 'material-product-manager',
    components: {
        MakeInventoryDialog,
        BarIcon,
        MaterialDetail,
        MakeProductAndMaterialClassifyDialog,
        AddProductAndMaterialDrawer
    },
    data() {
        return {
            types: [],
            tableData: [
                {}
            ],
            details: {},
            showDetails: false,
            addProductAndMaterialDrawer: false,
            total: 0,
            makeInvokeDialog: false,
            makeProductAndMaterialClassifyDialog: false,
            queryParams: {
                name: '',
                classify: -1,
                model: '',
                page: 1,
                limit: 12
            },

        }
    },
    methods: {
        getMaterialAndProduct(params) {
            mdApi.getMaterialAndProduct(params, ((res) => {
                if (res.code === 200) {
                    console.log(res.data);
                    this.tableData = res.data;
                    this.total = parseInt(res.msg);
                }
            }))
        },
        handleDrawerClosed() {
            this.addProductAndMaterialDrawer = false;
        },
        makeDialogClosed() {
            this.makeInvokeDialog = false;
        },
        handleChanged(currentNum, pageSize) {
            this.queryParams.page = currentNum;
            this.getMaterialAndProduct(this.queryParams);
        },
        updateInventoryCallback(data) {

        },
        //处理修改类型对话框关闭事件
        makeProductAndMaterialClassifyDialogClosed() {
            this.makeProductAndMaterialClassifyDialog = false;

        },
        //分类信息更新成功后的事件
        updateClassifyCallback(data) {
            //TODO
            this.details.classifyName = data.label;
            this.details.isEnableAboutClassify = 1;
            this.makeProductAndMaterialClassifyDialog = false;
        },
        handleClick() {
            console.log("点击了")
        },
        //获取分类信息
        getClassifyInfo() {
            mdApi.getMatProClassify(((res) => {
                if (res.code === 200) {
                    this.types = res.data;
                } else {
                    this.$message.error("网络不佳，请稍后再试");
                }
            }));
        },
        makeDetails(data) {
            this.details = data;
            this.showDetails = true;
        },
        //细节展示，回退事件
        handleBack() {
            this.details = [];
            this.showDetails = false;
        },
        handleSelected(data) {
            //菜单发生改变 data是分类的id
            this.queryParams.classify = data;
            this.getMaterialAndProduct(this.queryParams)
        },
        //查询按钮的方法
        handleQuery() {
            this.getMaterialAndProduct(this.queryParams);
        },
        //重置查询按钮、
        handleResetQuery() {
            this.queryParams = {
                name: '',
                classify: -1,
                model: '',
                page: 1,
                limit: 12
            };
            this.getMaterialAndProduct(this.queryParams);
        },
        //更新商品状态
        handleUpdateStatus(data) {
            let updateStatusParam = {
                id: data.id,
                status: data.stockStatus === '1' ? '0' : '1',
                category: data.category
            };
            mdApi.updateProductStatus(updateStatusParam, ((res) => {
                if (res.code === 200) {
                    data.stockStatus = data.stockStatus === '1' ? '0' : '1'
                    this.$message.success("已" + (data.stockStatus === '1' ? '启用' : '禁用'));
                } else {
                    this.$message.error("网络不佳，请稍后再试");
                }
            }))
        },
        //设置库存阈值信息
        handleMakeInventory(data) {
            this.details = data;
            this.makeInvokeDialog = true;
        },
        //修改产品分类信息
        updateClassify(data) {
            this.details = data;
            this.makeProductAndMaterialClassifyDialog = true;
        },
        //唤醒添加产品无聊的抽屉
        handleAdd(){
            this.addProductAndMaterialDrawer = true;
        }
    },
    mounted() {
        this.getMaterialAndProduct(this.queryParams);
        this.getClassifyInfo();
    }

}
</script>

<style scoped>
.main-title {
    margin: 20px 50px 20px 70px;

}

.pagination-block {
    position: absolute;
    display: block;
    bottom: 10px;
}
</style>
